<template>
	<view class="content">
		<view class="head">
			<image class="imgg" :src="avatar" mode="aspectFill"></image>
			<view class="name">{{username}}</view>
			<view class="merchant" v-if="isMerchant">商家</view>
		</view>
		<view class="addFollow" @click="changeFollow" v-if="isShow">
			<view v-if="!isFollow">+ 关注</view>
			<view v-else class="Followed">
				<u-icon name="checkmark"></u-icon>已关注
			</view>
		</view>
		<view class="bookList">
			<view class="book" v-for="(item,index) in saleBooks" :key="item.id" @click="goToPage(item.id)">
				<image :wx-if="ImgUrl" class="img1" :src="ImgUrl+item.bookImage" mode="aspectFill">
				</image>
				<view class="bokname">{{item.bookName}}</view>
				<view class="bokprice">￥{{item.price}}</view>
				<view class="isSale" v-if="item.status">已售</view>
				<view class="mask" v-if="item.status" @click.stop=""></view>
				<view class="deleteBook" @click.stop="deleteById(item.id)" v-if="!isShow&&!item.status">
					<u-icon name="close" color="#ff0000" size="15"></u-icon>
				</view>
			</view>
		</view>
		<view class="bookList">
			<view class="book" v-for="(item,index) in qiuGouBooks" :key="item.id"
				@click="goToPage2(item.id,item.userId)">
				<image :wx-if="ImgUrl" class="img1" :src="ImgUrl+item.purchaseImage" mode="aspectFill">
				</image>
				<view class="bokname">{{item.purchaseBook.bookName}}</view>
				<view class="bokprice">期望￥{{item.expectPrice}}</view>
				<view class="isQG">求购</view>
				<view class="mask" v-if="item.status" @click.stop=""></view>
				<view class="deleteBook" @click.stop="deleteqgById(item.id)" v-if="!isShow&&!item.status">
					<u-icon name="close" color="#ff0000" size="15"></u-icon>
				</view>
			</view>
		</view>
		<view class="bookList">
			<view class="book" v-for="(item,index) in hasSaleBooks" :key="item.id"
				@click="goToPage(item.id,item.userId)">
				<image :wx-if="ImgUrl" class="img1" :src="ImgUrl+item.bookImage" mode="aspectFill">
				</image>
				<view class="bokname">{{item.bookName}}</view>
				<view class="bokprice">￥{{item.price}}</view>
				<view class="isSale" v-if="item.status">已售</view>
				<view class="mask" v-if="item.status" @click.stop=""></view>
				<!-- <view class="deleteBook" @click.stop="deleteById(item.id)" v-if="!isShow&&!item.status">
					<u-icon name="close" color="#2979ff" size="15"></u-icon>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				avatar: '',
				originAvatar: '',
				username: '',
				saleBooks: [],
				hasSaleBooks: [],
				qiuGouBooks: [],
				ImgUrl: '',
				isFollow: false,
				token: '',
				BaseUrl: '',
				isShow: true,
				isMerchant: false
			}
		},
		onLoad() {
			let ImgUrl = getApp().globalData.ImgUrl
			this.ImgUrl = ImgUrl
			this.init()
		},
		onShareTimeline() {
			let title = '念旧书-校园闲置书籍跳蚤市场'
			return {
				title: title,
				path: 'pages/index/index',
				imageUrl: '../../static/logo.png'
			}
		},
		onShareAppMessage: function(e) {
			let title = '念旧书-校园闲置书籍跳蚤市场'
			return {
				title: title,
				path: 'pages/index/index',
				imageUrl: '../../static/logo.png'
			}
		},
		methods: {
			async init() {
				try {
					const page = await getCurrentPages()
					let x = page.length - 1
					let ImgUrl = getApp().globalData.ImgUrl
					let options = page[x].options
					this.userId = options.userId
					this.avatar = ImgUrl + options.avatar
					this.originAvatar = options.avatar
					this.username = options.username
					this.getZhuYe()
					this.hasFollowed()
					this.ismerchant()
					let isMe = uni.getStorageSync("userinfo").id
					if (isMe == this.userId)
						this.isShow = false
				} catch (res) {
					// console.log(res)
				}
			},
			async ismerchant() {
				let BaseUrl = getApp().globalData.BaseUrl
				let token = uni.getStorageSync('token');
				await uni.request({
					url: BaseUrl + '/identity/result',
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					data: {
						userId: this.userId
					},
					success: (ress) => {
						if(ress.data.data && ress.data.data.status == 1){
							this.isMerchant=true
						}
					}
				})
			},
			async getZhuYe() {
				this.BaseUrl = getApp().globalData.BaseUrl
				this.token = uni.getStorageSync('token')
				await uni.request({
					url: this.BaseUrl + '/saleBook/userSaleBooks',
					method: "POST",
					header: {
						'Content-Type': 'application/json',
						'token': this.token
					},
					data: {
						userId: this.userId
					},
					success: (res) => {
						// console.log(res)
						// this.saleBooks = res.data.data
						this.saleBooks = []
						this.hasSaleBooks = []
						res.data.data.forEach(v => {
							if (v.status == 1) {
								this.hasSaleBooks.push(v)
							} else {
								this.saleBooks.push(v)
							}
						})
					}
				})
				await uni.request({
					url: this.BaseUrl + '/purchase/user',
					method: "POST",
					header: {
						'Content-Type': 'application/json',
						'token': this.token
					},
					data: {
						userId: this.userId,
						status: 0
					},
					success: (res) => {
						// console.log("11111", res)
						this.qiuGouBooks = res.data.data
					}
				})
			},
			goToPage(id) {
				uni.navigateTo({
					url: '/pages/bookDetail/bookDetail?id=' + id + '&userId=' + this.userId
				})
			},
			goToPage2(id, userId) {
				uni.navigateTo({
					url: '/pages/bookDetail/qiuGouBook?id=' + id + '&userId=' + userId + '&avatar=' + this
						.originAvatar +
						'&username=' + this.username
				})
			},
			async hasFollowed() {
				await uni.request({
					url: this.BaseUrl + '/user/follow',
					method: "GET",
					header: {
						'Content-Type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						// console.log(res)
						res.data.data.forEach(v => {
							if (v.id == this.userId) {
								this.isFollow = true
							}
						})
					}
				})
			},
			async changeFollow() {
				if (this.isFollow === false) {
					await uni.request({
						url: this.BaseUrl + '/user/followUser',
						method: "GET",
						header: {
							'Content-Type': 'application/json',
							'token': this.token
						},
						data: {
							userId: this.userId
						},
						success: (res) => {
							// console.log(res)
							if (res.data.code === 200) {
								this.isFollow = true;
							}
						}
					})
				} else {
					await uni.request({
						url: this.BaseUrl + '/user/unfollow',
						method: "GET",
						header: {
							'Content-Type': 'application/json',
							'token': this.token
						},
						data: {
							userId: this.userId
						},
						success: (res) => {
							// console.log(res)
							if (res.data.code === 200) {
								this.isFollow = false;
							}
						}
					})
				}
			},
			deleteById(id) {
				uni.showModal({
					title: '提示',
					content: '删除该书籍？',
					success: (res) => {
						if (res.confirm) {
							uni.request({
								url: this.BaseUrl + '/saleBook/delete',
								method: "GET",
								header: {
									'Content-Type': 'application/json',
									'token': this.token
								},
								data: {
									saleBookId: id
								},
								success: (res) => {
									this.init()
								}
							})
						} else if (res.cancel) {
							return 0;
						}
					}
				})
			},
			deleteqgById(id) {
				uni.showModal({
					title: '提示',
					content: '删除该求购？',
					success: (res) => {
						if (res.confirm) {
							uni.request({
								url: this.BaseUrl + '/purchase/delete',
								method: "GET",
								header: {
									'Content-Type': 'application/json',
									'token': this.token
								},
								data: {
									id: id
								},
								success: (res) => {
									// console.log("deleteqg", res)
									this.init()
								}
							})
						} else if (res.cancel) {
							return 0;
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.head {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.imgg {
				width: 180upx;
				height: 180upx;
				border-radius: 50%;
			}

			.name {
				font-size: 36upx;
				font-weight: bold;
			}

			.merchant {
				background-color: #0f887e;
				color: #fff;
				font-size: 20upx;
				padding: 4upx 10upx;
				border-radius: 8upx;
				position: relative;
				// left: 10upx;
				top: 5upx;
			}
		}

		.addFollow {
			background-color: #FFECEC;
			width: 150upx;
			height: 50upx;
			padding: 10upx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 25upx;
			position: absolute;
			right: 10upx;
			top: 10upx;

			.Followed {
				display: flex;
			}
		}

		.bookList {
			margin-top: 50upx;

			.book {
				position: relative;
				float: left;
				margin: 0 11upx;
				box-shadow: 0px 0px 10px #888;
				border-radius: 10upx;
				overflow: hidden;
				margin-bottom: 30upx;
				height: 300upx;
				background-color: #efefef;
				width: 350upx;
				overflow: hidden;

				.img1 {
					height: 70%;
					width: 100%;
					border-radius: 10upx;
					box-shadow: 0px 0px 3px #888;
				}

				.bokname {
					margin-left: 15upx;
					width: 100%;
					overflow: hidden;
					// background-color: red;
					font-size: 34upx;
					font-weight: bold;
					height: 14%;
				}

				.bokprice {
					margin: 0 15upx;
					font-weight: bold;
					color: #ff7e53;
				}

				.isSale {
					position: relative;
					width: 80upx;
					top: -45upx;
					left: 250upx;
					font-weight: bold;
					color: red;
				}

				.isQG {
					position: relative;
					width: 80upx;
					padding: 0 8upx;
					top: -45upx;
					left: 250upx;
					font-weight: bold;
					color: white;
					background-color: green;
					border-radius: 10upx;
				}

				.mask {
					width: 350upx;
					height: 303upx;
					position: absolute;
					top: -1upx;
					background-color: rgba(197, 197, 197, 0.7);
				}

				.deleteBook {
					position: absolute;
					width: 30upx;
					height: 30upx;
					border-radius: 50%;
					background-color: #888;
					padding: 0;
					right: 3upx;
					top: 0upx;
				}
			}
		}
	}
</style>
